<template>
  <div class="user-edit-customer-page">
    <div class="user-edit-customer">
      <p class="edit-customer-title">客户名称</p>
      <p class="edit-customer-conter van-hairline--bottom">
        <van-field clearable v-model.trim="name" class="edit-customer-input" type="text" placeholder="请输入客户名称" />
      </p>
      <div class="edit-customer-bottom">
        <button class="edit-customer-sure" :disabled="name.length == 0" @click="sureHandler">保存</button>
        <button class="edit-customer-select" v-if="$route.query.from != 'custom'" @click="selectCustomerHandler">选择已有客户</button>
      </div>
    </div>
  </div>
</template>
<script>
import MaterialInput from 'COMP/MaterialInput'
import strFormat from '@/filters/strFormat'
import { checkStrLength, checkStrType } from '@/utils/tool'
import { mapGetters } from 'vuex'
import * as types from '@/store/mutation-types'
export default {
  components: {
    MaterialInput
  },
  data() {
    return {
      name: ''
    }
  },
  created() {
    this.name = this.reportAddInfo.clientRemarkName || this.reportAddInfo.clientName || '';
  },
  computed: {
    ...mapGetters(['reportAddInfo'])
  },
  methods: {
    inputHandler(event) {
      console.log(event)
      // if (event && event.length > 0) {
      //   let inputStr = strFormat.fmtWebCode(this.name)
      //   console.log(this.name)
      //   setTimeout(() => {
      //     this.name = inputStr
      //   }, 1)
      // }
    },
    selectCustomerHandler() {
      this.$router.replace('/user/myReport/reportCustomer')
    },
    sureHandler() {
      if (this.name.length == 0) {
        return this.$toast('客户名称不能为空')
      }
      if (this.name.length > 16) {
        return this.$toast('客户名称不能超过16个字符')
      }
      // if (!checkStrLength(this.name, 16)) {
      //   return this.$toast('客户名称最多8个汉字(或16个字符)')
      // }
      // if (!checkStrType(this.name)) {
      //   return this.$toast('客户名称只支持中文、英文和数字')
      // }
      let _reportAddInfo = {
        clientName: this.name,
        clientRemarkName: this.name
      }
      this.$store.commit(types.REPORT_INFO, _reportAddInfo)
      this.$router.back(-1)
    }
  }
}
</script>
<style lang="less" >
.van-dialog {
  border-radius: 12px;
  width: 72%;
  text-align: center;
}
.van-dialog__message {
  font-size: 15px;
  color: rgba(51, 51, 51, 1);
}
.van-button__text {
  font-size: 18px;
  color: rgba(0, 122, 230, 1);
}
.user-edit-customer-page {
  background: #ffffff;
  > .user-edit-customer {
    margin: 27px 16px;
    > .edit-customer-title {
      font-size: 24px;
      font-weight: 600;
      color: #13284D;
      line-height: 28px;
      margin-bottom: 16px;
    }

    > .edit-customer-conter {
      margin-bottom: 32px;
      > .edit-customer-input {
        overflow: hidden;
        font-size: 16px;
        font-weight: 500;
        color: #333;
        height: 38px;
        padding: 0; 
        // line-height: 35px;
        // width: 99%;
        // border: 0;
        // border-bottom: 1px solid #eeeeee; 
        &::-webkit-input-placeholder {
          color: #9BA4B4;
        }
      }
    }
    > .edit-customer-bottom {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      button{
         font-size: 16px;
         font-weight: 400;
         line-height: 22px;
         height: 44px;
         border-radius: 6px;
      }
      > .edit-customer-select {
        color: #007AE6;
        font-size: 14px;
        font-weight: 500;
        background: #fff;
        width: 100%;
        border: 1px solid #fff;
        margin-top: 24px;
        // margin-right: 20px;
      }
      > .edit-customer-sure {
        color: rgba(255, 255, 255, 1);
        background: #007AE6;
        width: 100%;
        border: 0;
        // margin-top: 35px;
      }
      .edit-customer-sure[disabled] {
        background: #C9D5E0;
        color: #FFFFFF;
      }
    }
  }
}
</style>
